import React, { useEffect, useState } from 'react';

import Carousel from '@compa/Carousel';
import Carousel2 from '@compa/Carousel2';
import TabContainer from '@compa/TabContainer';
import MediaBoard from '@compb/MediaBoard';
import MediaList from '@compb/MediaList';
import './index.css';
import axios from 'axios';
import { recommendDJProgram, recommendNewMusic } from '../../utils/api/recommenations';
import { mobileNumberIsRegestered } from '../../utils/api/login';
import VideoTile from '../../components/basic/VideoTile';
import { getAllVideoLists, getRecommendedVideo } from '../../utils/api/video';
let djArr = [];
const findingBannerList = [
    {
        name: '每日推荐'
    },
    {
        name: '私人FM'
    },
    {
        name: '歌单'
    },
    {
        name: '排行榜'
    },
    {
        name: '直播'
    },
    {
        name: '数字专辑'
    },
    {
        name: '歌房'
    },
    {
        name: '游戏专区'
    }
]
const FindingPage = () => {
    const [dataList, setDataList] = useState(null);
    const [banner, setBanner] = useState(null);
    const [dj, setDJ] = useState(null);
    const [playList, setPlayList] = useState(null);
    const [songList, setSongList] = useState(null);
    const [video, setVideo] = useState(null);
    // const [songList, setSongList] = useState(null);
    useEffect(() => {
        axios.get(recommendNewMusic()).then(res => {
            console.log(res.data);
            setDataList(res.data.result);
        })
        axios.get(recommendDJProgram()).then(res => {
            console.log(res.data);
        })
        axios.get('/banner?type=2').then(res => {
            console.log(res.data.banners);
            setBanner(res.data.banners);
        })
        axios.get('/dj/hot').then(res => {
            djArr = res.data.djRadios;
            setDJ(djArr.slice(0, 6));
        })
        axios.get('/recommend/resource').then(res => {
           console.log(res.data);
           setPlayList(res.data.recommend)
        })
        axios.get('/top/song?type=7').then(res => {
            console.log("推荐歌曲", res.data);
            let arr = res.data.data.slice(0, 13), n = 3, times = Math.ceil(arr.length / n), r = [];

            for (let i = 0; i < times; i++) {
                let left = i *n, right = (i + 1) * n >= arr.length ? arr.length : (i + 1) * n;
                r.push(arr.slice(left, right));
            }
            console.log(r);
            setSongList(r);
         });
        axios.get(getRecommendedVideo()).then(res => {
            console.log("Recommended Videos", res.data);
            setVideo(res.data.datas[0]);
        })
    }, []);
    return (
        <div className="finding-container page-container">
            <div className="finding-header">
                <input />
            </div>
            <div className="finding-banner">
                <Carousel type={2} list={findingBannerList} />
            </div>
            <MediaBoard header={'热门播客'} list={dj}/>
            <MediaList header={'热门歌曲'} list={dataList}/>
            {/* <MediaPad pad={dataList.length ? dataList[0] : {}} /> */}
            <Carousel2 list={banner}/>
            <MediaList header={`热门歌单`} list={playList}/>
            <TabContainer list={songList}/>
            <br />
            <VideoTile vdata={video}/>
        </div>
    )
}

export default FindingPage;